第4节 流程控制语句 #

<script> 
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(a);
    console.log(4);
    console.log(5);
    console.log(6);
    debugger;
    console.log(7);
    console.log(8);
</script>
    
<script> 
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(a);
    console.log(4);
    console.log(5);
    console.log(6);
	// 上面打印了一个没有声明的变量, 所以出错了, 程序终止运行, 不会停在这里
    debugger;
    console.log(7);
    console.log(8);
</script>

if(条件) {
  // 条件为true执行这里的代码  
} else {
  // 条件为false执行这里的代码
}

<!-- demo1 -->
<script>
    // 是否登录
    var isLogin = false;
    var text = '';
    // if (isLogin) {
    //     text = '138****0000';
    // } else {
    //     text = '立即登录';
    // }

    // 以上分支语句可以使用三目运算代替,会更简洁
    text = isLogin?'138****000':'立即登录';
    console.log('text',text); 
</script>
    
<!-- demo2 -->    
<script>
    var str = prompt('请输入');
    var gender = str === '1' ? '男人' : '女人';
    alert(gender);
</script>    

<script>
   var city = prompt('请输入城市简写');

   switch(city) {
        case 'sz':
            alert('你选择了深圳'); 
            break;
        case 'gz':
            alert('你选择了广州');
            break;
        case 'sh':
            alert('你选择了上海');
            break;
        case 'bj':
            alert('你选择了北京'); 
            break;
        default:
            alert('该城市不存在');     
   } 
</script>

练习1: 
var month = prompt();
var day = prompt();
// 若用户输入为个位数, 请将其变为2两位数, 最后打印出来
month = month<10?'0'+month:month;
console.log('month:', month);

day = day<10?'0'+day:day;
console.log('day:', day); 

练习2: 麦当劳的饮料机有四个按钮, 按钮1得到橙汁,按钮2得到牛奶, 按钮3得到啤酒, 按钮4得到咖啡, 
请编写一个程序, 弹出一个窗口, 用户输入的的数字不同, 弹出不同的饮料.
// 注意: 页面输入的内容都是字符串
// Switch进行比较用的是===, 也就是类型要相同, 值也要相同    
<script>
     var num = prompt('请输入数字');
     num = Number(num); 
    switch(num) {
        case 1:
            alert('橙汁');
            break;
        case 2:
            alert('牛奶');
            break;
        case 3:
            alert('啤酒');
            break;
        default:
            alert('咖啡'); 
    } 
</script>    
    

<!-- 计算1-10总和 -->
<script>
    var sum = 0;
   for(var i=1;i<=10;i++){ 
    sum = sum + i; 
   } 
   console.log('sum=',sum); 
</script>
    
    
<!-- 在页面上显示10次"我爱web前端" -->
<script> 
    var str = '';
    for(var i=0;i<10;i++) {
        str = str + '<li>我爱web前端</li>';
        console.log(str); 
    }
    document.write('<ul>');
    document.write(str);
    document.write('</ul>');
</script>     

 <script>
    var i = 0;
    while(i<10) {
        console.log(i);
        i++;
    }
</script>
    
<script>
    var i =11;
    do{
        console.log(i);
        i++;
    }while(i<10);
</script>    

<script>
    // 数组的循环
    var list = ['a','b','c','d','e'];
    var str = '';
    for(var i=0;i<list.length;i++) {
        console.log(list[i]);
        str += `<li>${list[i]}</li>`;
    } 
    document.write(str);
</script>

<script>
    // 数组的循环
    var list = [{
            username: '张三1',
            age: 18
        },
        {
            username: '张三2',
            age: 19
        },
        {
            username: '张三3',
            age: 20
        },
        {
            username: '张三4',
            age: 21
        },
        {
            username: '张三5',
            age: 22
        },
    ];
    var str = '';
    for (var i = 0; i < list.length; i++) { 
        str += `<li> 
            <span>用户名: ${list[i].username}</span> 
            <span>年龄: ${list[i].age}</span> </li>`;
    }
    document.write(str);
</script>

var list = [ { categoryId: 145, name: "时令鲜果", iconUrl: "http://static.huruqing.cn/fresh/r1.png", }, { categoryId: 243, name: "海鲜水产", iconUrl: "http://static.huruqing.cn/fresh/r2.png", }, { categoryId: 279, name: "家禽蛋", iconUrl: "http://static.huruqing.cn/fresh/r3.png", }, { categoryId: 346, name: "地方农产", iconUrl: "http://static.huruqing.cn/fresh/r4.png", }, { categoryId: 436, name: "百果园公司", iconUrl: "http://static.huruqing.cn/fresh/r5.png", }, { categoryId: 357, name: "农品茗茶", iconUrl: "http://static.huruqing.cn/fresh/r6.png", }, { categoryId: 6, name: "五谷杂粮", iconUrl: "http://static.huruqing.cn/fresh/r7.png", }, { categoryId: 311, name: "牛羊肉", iconUrl: "http://static.huruqing.cn/fresh/r8.png", }, ];
var str = "";
for (var i = 0; i < list.length; i++) {
  str += ` <p class="item">
    <img src="${list[i].iconUrl}" alt="">
    <span>${list[i].name}</span>
</p> `;
}

var $top = document.querySelector(".top");
$top.innerHTML = str;

<script>
    var obj = {
        name: '张三',
        age: 18,
        addr: '广东深圳',
        hobby: '篮球,足球,羽毛球'
    }

    for(var p in obj){
        console.log(p+'='+obj[p]); 
    } 
</script>